<template>
  <n-flex :size="14" vertical justify="center" class="p-14px text-(12px #909090)">
    <!-- 搜索结果为空时显示建议和历史记录 -->
    <template v-if="userList.length === 0 && !searchQuery && groupList.length === 0 && conversationList.length === 0">
      <n-flex
        align="center"
        :size="14"
        class="p-6px mb-6px mr-10px cursor-pointer rounded-8px hover:bg-[--list-hover-color]">
        <n-avatar :size="38" round src="msgAction/clapping.png" />
        <p class="text-(12px [--chat-text-color]) flex-1 truncate">在搜索框内搜索</p>
      </n-flex>
    </template>

    <n-scrollbar style="max-height: calc(100vh - 90px)">
      <!-- 搜索结果 -->
      <template v-if="conversationList.length > 0">
        <p class="text-(12px #909090) mb-6px">会话</p>
        <template v-for="item in conversationList" :key="item.conversationID">
          <n-flex
            align="center"
            :size="14"
            class="p-6px mb-6px mr-10px cursor-pointer rounded-8px hover:bg-[--list-hover-color]"
            @click="openConversation(item, 'conversation')">
            <n-avatar :size="38" round bordered :src="getConvAvatar(item)" />
            <p class="text-(14px [--text-color])">{{ getConvName(item) }}</p>
          </n-flex>
        </template>
      </template>
      <!-- 搜索结果 -->
      <template v-if="userList.length > 0">
        <p class="text-(12px #909090) mb-6px">用户</p>
        <template v-for="item in userList" :key="item.UserId">
          <n-flex
            align="center"
            :size="14"
            class="p-6px mb-6px mr-10px cursor-pointer rounded-8px hover:bg-[--list-hover-color]"
            @click="openConversation(item, 'user')">
            <n-avatar :size="38" round bordered :src="item.Avatar || '/logo.png'" fallback-src="/logo.png" />
            <p class="text-(14px [--text-color])">
              {{ item.UserName }}
              <n-tag v-if="item.Enabled === 0" size="small" type="warning" round>离职</n-tag>
            </p>
          </n-flex>
        </template>
      </template>
      <!-- 搜索结果 -->
      <template v-if="groupList.length > 0">
        <p class="text-(12px #909090) mb-6px">群聊</p>
        <template v-for="item in groupList" :key="item.GroupId">
          <n-flex
            align="center"
            :size="14"
            class="p-6px mb-6px mr-10px cursor-pointer rounded-8px hover:bg-[--list-hover-color]"
            @click="openConversation(item, 'group')">
            <n-avatar :size="38" round bordered :src="item.Avatar" />
            <p class="text-(14px [--text-color])">{{ item.GroupName }}</p>
          </n-flex>
        </template>
      </template>
    </n-scrollbar>

    <!-- 没有搜索结果时 -->
    <template v-if="searchQuery && userList.length === 0 && groupList.length === 0 && conversationList.length === 0">
      <div style="height: calc(100vh - 212px)" class="flex-col-center gap-12px">
        <n-image class="size-64px" src="/msgAction/exploding-head.png" />
        <p class="text-(12px [--chat-text-color])">未找到相关结果</p>
      </div>
    </template>
  </n-flex>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
import { useCommon } from '@/hooks/useCommon.ts'
import { useMitt } from '@/hooks/useMitt'
import { useTencentCloudSearchStore } from '@/stores/tencentCloudSearchStore.ts'
import TencentCloudChat, { Conversation } from '@tencentcloud/chat'

const tencentCloudSearchStore = useTencentCloudSearchStore()
const router = useRouter()
const { openMsgSession } = useCommon()
// 从路由参数或共享状态中获取搜索查询
const searchQuery = ref('')
// 搜索结果
const userList = computed(() => {
  return tencentCloudSearchStore.userList
})

const groupList = computed(() => {
  return tencentCloudSearchStore.groupList
})

const conversationList = computed(() => {
  return tencentCloudSearchStore.conversationList
})

const getConvName = (item: Conversation) => {
  if (item.type === TencentCloudChat.TYPES.CONV_GROUP) {
    return item.groupProfile.name
  }

  if (item.type === TencentCloudChat.TYPES.CONV_C2C) {
    return item.userProfile.nick
  }

  return ''
}

const getConvAvatar = (item: Conversation) => {
  if (item.type === TencentCloudChat.TYPES.CONV_GROUP) {
    return item.groupProfile.avatar
  }

  if (item.type === TencentCloudChat.TYPES.CONV_C2C) {
    return item.userProfile.avatar
  }

  return 'logo.png'
}

// 监听搜索框输入变化
useMitt.on('search_input_change', (value) => {
  searchQuery.value = value
  handleSearch(value)
})

// 处理搜索
const handleSearch = (value: string) => {
  if (!value) {
    tencentCloudSearchStore.userList = []
    tencentCloudSearchStore.groupList = []
    tencentCloudSearchStore.conversationList = []
    return
  }

  tencentCloudSearchStore.searchAll(value)
}

// 打开会话
const openConversation = (item: any, type: 'user' | 'group' | 'conversation') => {
  // 返回上一页（关闭搜索页面）
  router.go(-1)
  // 打开对应会话
  let info: any
  if (type === 'user') {
    info = {
      userID: item.UserId
    }
  } else if (type === 'conversation') {
    info = item
  } else {
    info = {
      groupID: item.GroupId
    }
  }
  openMsgSession(info, type)
}

onMounted(() => {})
</script>
